<template>
  <div class="stloading_box">
    <div id="set_loading">
      <span class="p1 span"></span>
      <span class="p2 span"></span>
      <span class="p3 span"></span>
      <span class="p4 span"></span>
      <span class="p5 span"></span>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
@keyframes Loading {
  from{
    opacity: 0.5;
    transform: translateY(0px);
  }
  to{
    opacity: 1;
    transform: translateY(-16px);
  }
}
.stloading_box {
  display: flex;
  height: 100px;
  justify-content: center;
  align-items: center;
  #set_loading {
    %span {
      width: 20px;
      display: inline-block;
      height: 20px;
      border-radius: 50%;
      opacity: 0.5;
      background: var(--el-color-primary);
      margin: 0 4px;
    }
    .p1 {
      @extend %span;
      background: var(--el-color-success);
      animation: Loading 0.6s alternate infinite;
      outline-color: red;
    }
    .p2 {
      @extend %span;
      background: var(--el-color-success-light-3);
      animation: Loading 0.6s alternate infinite;
      animation-delay: 0.2s;

    }
    .p3 {
      @extend %span;
      background: var(--el-color-warning);
      animation: Loading 0.6s alternate infinite;
      animation-delay: 0.4s;


    }
    .p4 {
      @extend %span;
      background: var(--el-color-warning-light-3);
      animation: Loading 0.6s alternate infinite;
      animation-delay: 0.6s;



    }
    .p5 {
      @extend %span;
      background: var(--el-color-warning-light-7);
      animation: Loading 0.6s alternate infinite;
      animation-delay: 0.8s;

    }
  }
}
</style>
